<script>
export default {
  name: 'ToolButton',
  props: {
    type: {
      type: String,
      validator: (value) => {
        return ['Button', 'Select'].includes(value)
      }
    },
    category: {
      type: String,
      validator: (value) => {
        return ['Component', 'Function'].includes(value)
      }
    },
    icon: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    childrenList: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<template>
  <div class="component-tool-button-container">
    <i class="icon" :class="'el-icon-' + icon" />
    <div class="btn-text">
      <span class="text" v-if="type === 'Button'">{{ text }}</span>
      <el-dropdown v-if="type === 'Select'" trigger="click">
        <div>
          <span class="text">{{ text }}</span>
          <i class="btn-icon el-icon-arrow-down" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(child, i) in childrenList" :key="'child-list_' + i">{{ child['text'] }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<style lang="scss">
.component-tool-button-container {
  height: 100%;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  user-select: none;
  cursor: pointer;

  &:hover {
    border: 1px solid #d1d1d1;
    background-color: rgba(220, 220, 220, 0.12);
    border-radius: 4px;
  }

  .icon {
    font-size: 22px;
  }

  .btn-text {
    font-size: 12px;

    .btn-icon {
      margin-left: 6px;
    }
  }
}
</style>
